<script setup>

</script>



<template>
   
    <div class="glav">
        <h1>Профиль</h1>
       
         <div class="tup">

        
        <a href="#">Редактировать</a>
         </div>

    </div>
     <hr>
    <h2>Пользователь</h2>
    <div class="card">
        <button class="wrap ">
              
              <div class="cart">
               
                Общее
              </div>
            </button>

             <button class="wrap ">
              
              <div class="cart">
                Образование
                
              </div>
            </button>

             <button class="wrap ">
              
              <div class="cart">
                
                Опыт работы
                
              </div>
            </button>

             <button class="wrap ">
              
              <div class="cart">
                
                Сертификаты

               </div>
             </button>
    </div>
         
<div class="carp">
    <div class="cars">
        <div class="general">

        <h1>Общее</h1>

        <div class="general2">

            <h3>ФИО:</h3>
            <p>Иванов Иван Иванович</p>

        </div>

        <h3>Hомер телефона:</h3>

     </div>
    </div>
    
</div>

        
       

    



  
     
         




           
      
    



</template>







<style scoped>
.carp{
 margin: 15px;

}
.cars{
    display: flex;
  align-items: center;
  border-radius: 40px;
  transition: 0.2s;
  -moz-box-shadow:0 0 10px #338eeb;
-webkit-box-shadow:0 0 10px #338eeb;
box-shadow:0 0 10px #338eeb;
}

.general{
   
    display: flex;
  flex-direction: column;
    align-items: baseline;
}
.general2{
    
    display: flex;
    align-items: baseline;
    margin: 10px;
}



 


.wrap{


    background: none;
      border: none;
  display: flex;
  align-items: center;
  border-radius: 60px;
  transition: 0.2s;
  height: 15px;
padding: 15px 10px;
  -moz-box-shadow:0 0 10px #338eeb;
-webkit-box-shadow:0 0 10px #338eeb;
box-shadow:0 0 10px #338eeb;
    transition: .3s;

}

.wrap:hover{
    background: #000;
}

.card{
    
    display: flex;
    justify-content: space-around;
  
}

a{
    
 
    text-decoration: none;
    color: #000;
    
}

.glav{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.tup{
   display: flex;
  align-items: center;
  padding: 10px 35px;
  border-width: 2px ;
  border-style: solid ;
  border-radius: 30px;
  transition: 0.2s;
  height: 27px;
  -moz-box-shadow:0 0 10px #338eeb;
-webkit-box-shadow:0 0 10px #338eeb;
box-shadow:0 0 10px #338eeb;
    border: none;
}

.tup a{
    text-decoration: none;
    color: black;
    
    outline: none;
    
}
h2{
    margin: 15px;
}
h1{
    margin: 20px;
}
</style>